<!-- 登录页 -->
<template>
  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LBS智慧营销管理系统-登录</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div class="login-container">
    <!-- 顶部品牌区域 -->
    <div class="brand">
      <div class="logo"><img src="1.PNG" alt="Tedu"></div>
      <div class="system-name">LBS智慧营销管理系统</div>
    </div>

    <!-- 登录卡片区域 -->
    <div class="login-card">
      <div class="card-left">
        <img src="img.png" alt="LBS系统示意图">
      </div>
      <div class="card-right">
        <form action="/v1/user/login" method="post">
          <!-- 视角选择 -->
          <div class="form-group">
            <select name="view" id="view">
              <option value="merchant">商家视角</option>
              <option value="other">平台视角</option>
            </select>
          </div>

          <!-- 手机号 -->
          <div class="form-group">
            <input type="tel" name="phone" placeholder="请输入手机号" v-model="user.username">
          </div>

          <!-- 密码 -->
          <div class="form-group">
            <input type="password" name="password" placeholder="请输入密码"  v-model="user.password">
          </div>

          <!-- 验证码 -->
          <div class="form-group captcha-group">
            <input type="text" name="captcha" v-model="user.code" placeholder="请输入验证码">
            <span class="captcha-code" id="captchaCode"></span>
            <input type="button"  @click="generateCaptcha" value="刷新验证码">
          </div>

          <!-- 登录按钮 -->
          <div class="form-group">
            <button type="submit" @click="login">登录</button>
          </div>
        </form>
      </div>
    </div>
  </div>



  </body>
  </html>

</template>

<script setup>



import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
function generateCaptcha() {
  // axios.post(BASE_URL+'/v1/user/login',user.value)
  //     .then((response)=>{
  //
  //
  //       document.getElementById('captchaCode').innerText = captcha;
  //     });
    // 定义验证码可选字符（数字+大小写字母，排除易混淆的字符如 0/O、1/l）
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let captcha = '';
    for (let i = 0; i < 4; i++) {
      // 随机选取字符
      const randomIndex = Math.floor(Math.random() * chars.length);
      captcha += chars[randomIndex];
    }
    // 将生成的验证码赋值给 span 元素
    document.getElementById('captchaCode').innerText = captcha;
}

// 页面加载时自动生成一次验证码
window.onload = generateCaptcha;

//定义对象用来保存用户登录时输入的数据
const user = ref({username:'',password:'',code:''});
//定义点击登录按钮时调用的方法
const login = ()=>{
  alert(user.value.username);
  alert(user.value.password);
  console.log(user.value);
  //1.向后端服务器发送登录请求
  axios.post('http://localhost:8080/v1/user/login',user.value)
      .then((response)=>{
        //2.在回调函数中处理接收到的后端响应数据
        //response是响应对象,我们可以从它的data属性中获取后端返回的具体数据
        console.log(response.data);
        /* response.data是JsonResult
        * response.data.data是JsonResult对象data属性的值,比如userVO或校验失败具体消息 */
        if(response.data.code == 2000){
          //提示登录成功并重定向到用户列表页
          ElMessage.success('登录成功!');
          //localStorage维护的是字符串类型的键值对
          //将userVO对象转为JSON字符串,并保存到localStorage中
          localStorage.setItem('user',JSON.stringify(response.data.data));
          router.push('/');
        }else if(response.data.code == 3001){
          //参数校验失败,提示具体的失败消息
          ElMessage.error(response.data.data);
        }else{
          //登录失败显示后端返回的错误信息,并清空表单输入框
          ElMessage.error(response.data.message);
          user.value = {username: '', password: ''};
        }
      })
}






</script>

<style scoped>
/* 全局重置与基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "微软雅黑", sans-serif;
}

body {
  background: linear-gradient(135deg, #007bff, #0056b3);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 80px;
}

/* 品牌区域样式 */
.brand {
  text-align: left;
  margin-bottom: 40px;
  color: #fff;
  display: flex;
  column-gap: 50px;
  position: absolute; /* 脱离文档流 */
  top: 5vh;            /* 距离父元素顶部 0 像素 */
  left: 5vh;
}

.brand .logo {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 5px;
}

.brand .slogan {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 10px;
}

.brand .system-name {
  font-size: 25px;
}

/* 登录卡片样式 */
.login-card {
  display: flex;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  vertical-align: center;
  margin-top: 15%;
}

.card-left {
  width: 300px;
  padding: 20px;
  background: #e9f2ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-left img {
  max-width: 100%;
  height: auto;
}

.card-right {
  padding: 30px;
  width: 400px;
}

/* 表单组通用样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group select,
.form-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.form-group select:focus,
.form-group input:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}

/* 验证码组特殊样式 */
.captcha-group {
  display: flex;
  gap: 10px;
}

.captcha-code {
  background: #333;
  color: #fff;
  padding: 12px 15px;
  border-radius: 4px;
  font-size: 16px;
  user-select: none;
}

/* 登录按钮样式 */
.form-group button {
  width: 100%;
  padding: 12px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}


.form-group button:hover {
  background: #0056b3;
}


/* 可刷新验证码按钮特殊样式 */
button {
  width: 100%;
  padding: 12px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
  margin-top: 10px;
}
</style>